<template>
  <div>
    <h1>注册</h1>

    <p>账号： <input type="text" v-model="form.username" @blur="checkusername"></p>
    <span class="hh">{{ hint.username }}</span>
    <p>密码： <input type="text" v-model="form.password" @blur="checkpassword"></p>
    <span class="hh">{{ hint.password }}</span>
    <p>手机号： <input type="text" v-model="form.mobile" @blur="checkmobile"></p>
    <span class="hh">{{ hint.mobile }}</span>
    <P>验证码： <input type="text" v-model="form.codes" @blur="">
      <button :disabled="flag" @click="checkcodes">{{ mes }}</button>
    </P>
    <span class="hh">{{ hint.codes }}</span>
    <button @click="add">注册</button>


  </div>
</template>

<script>
export default {
  name: "regi",
  data() {
    return {
      form: {},
      hint: {username: '请输入5-12位账号', password: '请输入6-10位密码', mobile: '请输入手机号', codes: '请输入验证码'},
      mes: '获取验证码',
      flag: false,
      time: 60
    }
  },
  methods: {
    checkusername() {
      let name = this.form.username
      if (name == undefined || name == null || name == '') {
        this.hint.username = '账号不能为空'
        return false
      }
      let re = /\w{5,12}$/
      if (!re.test(name)) {
        this.hint.username = '账号格式错误'
        return false
      }
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 10010) {
            this.hint.username = '账号不能为空'
            return false
          }
          if (res.data.code == 10011) {
            this.hint.username = '账号不符合规则'
            return false
          }
          if (res.data.code == 10012) {
            this.hint.username = '账号已存在'
            return false
          }
          this.hint.username = ''


        })


    },
    checkpassword() {
      let pwd = this.form.password
      if (pwd == undefined || pwd == null || pwd == '') {
        this.hint.password = '密码不能为空'
        return false
      }
      let re = /\w{6,10}$/
      if (!re.test(pwd)) {
        this.hint.password = '密码格式错误'
        return false
      }
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 10013) {
            this.hint.username = '密码不能为空'
            return false
          }
          if (res.data.code == 10014) {
            this.hint.username = '密码不符合规则'
            return false
          }
          this.hint.password = ''
        })

    },
    checkmobile() {
      let mobile = this.form.mobile
      if (mobile == undefined || mobile == null || mobile == '') {
        this.hint.mobile = '手机号不能为空'
        return false
      }
      let re = /^1[3-9]\d{9}$/
      if (!re.test(mobile)) {
        this.hint.mobile = '手机号格式错误'
        return false
      }
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 10015) {
            this.hint.mobile = '手机号不能为空'
            return false
          }
          if (res.data.code == 10016) {
            this.hint.mobile = '手机号不符合规则'
            return false
          }
          if (res.data.code == 10017) {
            this.hint.mobile = '手机号已存在'
            return false
          }
          this.hint.mobile = ''


        })

    },
    checkcodes() {
      this.$axios.post('note/', this.form)
        .then(res => {
          if (res.data.code == 200) {
            let jy = setInterval(() => {
              //时间减一
              this.time--
              this.mes = this.time + '后再操作'
              //按钮失效
              this.flag = true
              if (this.time == 0) {
                clearInterval(jy)
                this.time = 60
                this.flag = false
                this.hint.codes = '请输入验证码'

              }

            }, 1000)
          } else {
            this.hint.codes = ''
          }
        })
    },
    add() {
      this.checkusername()
      this.checkpassword()
      this.checkmobile()
      this.checkcodes()
      this.$axios.post('add/', this.form)
        .then(res => {
          if (res.data.code == 200) {
            alert('添加成功')
            this.form = {}
          } else {
            alert('添加失败')
          }
        })


    }
  }
}
</script>

<style scoped>
.hh {
  color: red;
  font-size: 10px;
}

</style>
